<div class="app-content-body fade-in-up" ng-controller="ProcessModelListCtrl" >
<div class="hbox hbox-auto-xs hbox-auto-sm"   >
  <div class="col w-md bg-light dk b-r bg-auto" >
    <div class="wrapper bg-light lter b-b">
		<div class="input-group">
			<input type="text" ng-model="searchValue" ng-keydown="searchProcessModel($event)"  class="form-control input-sm bg-light no-border rounded padder" placeholder="{{'processModel.searchProcessModel'|translate}}">
              <span class="input-group-btn">
                <button type="submit" class="btn btn-sm bg-light rounded" ng-click="searchProcessModel()"><i class="fa fa-search"></i></button>
              </span>
		</div>
    </div>
    <div class="wrapper"  >
		<div style="padding-left:10px;margin-bottom: 5px;"  >
			<span class="text-info"  > <div style="padding-top:10px;padding-bottom:5px;"  ><b ><i class="fa fa-angle-down" ></i>&nbsp;&nbsp;{{'processModel.allProcessModel'|translate}}</b></div></span>
			<abn-tree
					tree-data         = "processModeFolderTreeData"
					tree-control      = "processModeFolderTree"
					on-select         = "processModeFolderHandler(branch)"
					expand-level      = "1"
					icon-collapse       = "fa fa-angle-down"
					icon-expand    = "fa fa-angle-right"
			>
			</abn-tree>
		</div>
		<div style="padding-left:10px;margin-bottom: 5px;"  >
			<span class="text-info"  > <div style="padding-top:10px;padding-bottom:10px;"  ><b ><i class="fa fa-angle-down" ></i>&nbsp;&nbsp;{{'processModel.label'|translate}}</b></div></span>
			<ul class="nav nav-pills nav-stacked nav-sm">
				<li class="{{favoriteProcessModel ? 'active' : '' }}" >
					<a ng-click="favoriteProcessModelFn()"  >
						<span>{{'processModel.favorite'|translate}}</span>&nbsp;&nbsp;<i class="glyphicon glyphicon-star icon "></i>
						<i class="icon-check pull-right filter-close" ></i>
					</a>
				</li>
			</ul>
		</div>
    </div>
  </div>
 <div class="col" >
    <div class="wrapper bg-light lter b-b" style="height:61px;">
		<div class="btn-toolbar">
			<ul class="breadcrumb" style="display: block;float:left;background:none;margin-bottom: 0px;">
				<li><a ui-sref="app.news" ><i class="iconfont icon-xinwen"></i> {{'aside.nav.news'|translate}}</a></li>
				<li class="active"><i class="fa  fa-sitemap"></i> <span translate="aside.nav.processModel"></span> </li>
			</ul>
			<div class="pull-right m-r-sm " style="margin-top: 8px;" >
				<span ng-show="searchValue!=null&&searchValue!=''" >{{'common.search'|translate}} {{searchValue}}</span>
				<span ng-show="processModeFolderHandlerBranch==null&&(searchValue==null||searchValue=='')&&!favoriteProcessModel" >{{'processModel.allProcessModel'|translate}}</span>
				<span ng-show="favoriteProcessModel" >{{'processModel.favorite'|translate}}</span>
				{{processModeFolderHandlerBranch.name}}  {{'common.general'|translate}} {{totalCount}} {{'processModel.barProcessModel'|translate}}
			</div>
		</div>
	</div>
	 <div class="process-list">
		 <div class="process-item" ng-repeat="processModel in processModels" style="background-color: {{processModel.bgColor || '#23b7e5'}};background-image: url('{{processModel.bgImage}}') " ui-sref="app.processmodelstart({processModelId:processModel.id,processParameter:0})">
			 <a  ng-click="setFavorite(processModel.id,processModel.favorite,processModel.index,$event)" class="favorite {{processModel.favorite ? 'active' : ''}}"><i class="fa {{processModel.favorite ? 'fa-star' : 'fa-star-o'}} icon"></i></a>
			<!-- <a ng-show="!processModel.favorite" class="favorite"><i class="fa fa-star-o icon"></i></a>-->
			 <div class="name">{{processModel.name}}</div>
			 <div class="desc" ng-show="processModel.description">{{processModel.description}}</div>
			 <div class="process-icon">
				 <i class="iconfont {{processModel.icon || 'icon-iconliucheng'}}"></i>
				 <!--<img ng-show="processModel.icon==null" src="/suite/plugins/img/process/flowchart.png">-->
				 <!--<img ng-show="processModel.icon!=null" src="/suite/plugins/servlet/loadSource/{{processModel.icon}}">-->
			 </div>
			 <!--<div ng-show="processModel.color!=null" style="width:80px;height:70px;padding:10px;margin-left:10px;border-radius:10px;background-color:{{processModel.color}};"-->
				  <!--class="btn thumb pull-left m-r">-->
				 <!--<img ng-show="processModel.icon==null" src="/suite/plugins/img/process/flowchart.png">-->
				 <!--<img ng-show="processModel.icon!=null" src="/suite/plugins/servlet/loadSource/{{processModel.icon}}">-->
			 <!--</div>-->
		 </div>
		 <div style="text-align: center;margin-top: 30px;" ng-show="processModels.length==0"><i class="iconfont  icon-meiyousoudaoxinxi" style="font-size: 23px;"></i>&nbsp;&nbsp;<span translate="processModel.noProcessModel"></span></div>
	 </div>
 </div>
</div>
</div>
